<template>
	<!-- 抢单大厅页面 -->
	<view class="grabOrder">
		<view class="null" v-if="orderList.length==0">
			<none></none>
		</view>
		<view v-else>
			<view class="geabOrder-main" v-for="(item,index) in orderList" :key="index">
				<view class="header">
					<view class="avatarImg">
						<image :src="item.avatar" mode="aspectFill"></image>
					</view>
					<view class="nickInfo">
						<view class="nickName">{{item.consignee}}</view>
						<view class="distance">距你{{item.juli}}km</view>
					</view>
					<view class="button">
						<view class="location" @tap="viewLocation(item)">
							<text class="icon iconfont icon-weizhi"></text>
							<text>查看位置</text>
						</view>
						<view class="TakOrder" @tap="orderTak(item)">立即接单</view>
					</view>

				</view>
				<view class="main-content">
					<view class="address">
						<view class="address-title">上门地址</view>
						<view class="address-content">{{item.location}}{{item.detail}}</view>
					</view>
					<view class="address">
						<view class="address-title">预约时间</view>
						<view class="address-content">{{item.reservetime}}</view>
					</view>
					<view class="photo" v-if="item.pic_url.length!=0">
						<view class="photo-title">上传照片</view>
						<view class="photo-box">
							<image v-for="(i,k) in item.pic_url" :key="k" :src="i" mode="aspectFill"
								@tap="previewImage(item.pic_url,k)"></image>
						</view>
					</view>
				</view>
			</view>
			<noMore v-if="!hasMore"></noMore>
			<view v-else class="loading">加载中...</view>
		</view>
	</view>
</template>

<script>
	import util from '../../component/commen/api/util';
	import none from "@/otherPages/none/none.vue"
	import noMore from "@/component/noMore.vue"
	export default {
		components: {
			none,
			noMore
		},
		data() {
			return {
				orderList: [], //订单信息
				page:1,//页
				psize:5,//每页条数
				hasMore:true,//是否还有更多数据
				latitude:"",
				longitude:""
			};
		},
		onShow() {
			this.getOrder()
		},
		onReachBottom() {
			this.page++
			this.getData()
			console.log("触底加载")
		},
		methods: {
			getOrder() { //获取抢单大厅数据
				uni.getLocation({
					type: "wgs84",
					success: (res) => {
						console.log("位置信息：", res)
						// 拿到位置信息
						this.latitude = res.latitude
						this.longitude = res.longitude
						this.getData()
					}
				})
			},
			getData(){//请求接口数据
				if(!this.hasMore){
					return;
				}
				var params = {
					// do: "collector",
					do:"colllist",//新
					op: "robCenter",
					collectorid: uni.getStorageSync("collectorid"),
					latitude: this.latitude,
					longitude: this.longitude,
					page: this.page,
					psize: this.psize
				}
				util.requestWithSign(params).then(event => {
					this.orderList = this.orderList.concat(event.data.list)
					if(event.data.total==this.orderList.length){//数据已经加载完
						return this.hasMore = false
					}
					console.log("抢单大厅", event.data)
				})
			},
			previewImage(item, index) { //点击图片预览
				uni.previewImage({
					current: index, // 当前显示图片的索引
					urls: item // 需要预览的图片链接列表
				});
			},
			viewLocation(item) {//点击查看位置
				console.log("订单详细信息：",item)
				var location = item.location+item.detail
				uni.openLocation({
					latitude: Number(item.lat),
					longitude: Number(item.lng),
					address: location,
					scale: 18,
					success: function(e) {
						console.log("success", e);
					}
				});
			},
			orderTak(value){//点击立即接单
				console.log("点击立即接单:",value)
				var params = {
					do:"collector",
					op:"receive",
					collectorid:uni.getStorageSync("collectorid"),
					orderid:value.id,
					uid:uni.getStorageSync("uid")
				}
				util.requestWithSign(params).then(res=>{
					if(res.errno==0){
						uni.showToast({
							title:"接单成功",
							success:(e=>{
								uni.navigateTo({
									url:`/otherPages/myTakOrder/myTakOrder?openId=1`
								})
							})
						})
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.grabOrder {
		padding-bottom: 30rpx;
		box-sizing: border-box;

		.null {
			margin-top: 300rpx;
		}

		.geabOrder-main {
			background: #fff;
			margin-top: 20rpx;
			border-radius: 20rpx;

			.header {
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #e7e7e7;

				.avatarImg {
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.nickInfo {
					margin-left: 10rpx;

					.nickName {
						font-weight: bold;
					}

					.distance {
						font-size: 25rpx;
						color: #00b388;
					}
				}

				.button {
					margin-left: auto;
					display: flex;
				}

				.location {
					width: 150rpx;
					height: 45rpx;
					font-size: 25rpx;
					line-height: 45rpx;
					background: #f1f1f1;
					color: #00b388;
					text-align: center;
					border-radius: 10rpx;
					margin-left: auto;
					margin-right: 10rpx;

					.icon-weizhi {
						font-size: 30rpx;
					}
				}

				.TakOrder {
					width: 150rpx;
					height: 45rpx;
					font-size: 25rpx;
					line-height: 45rpx;
					text-align: center;
					background: #00b388;
					color: #fff;
					border-radius: 10rpx;
					margin-left: auto;
				}
			}

			.main-content {
				font-size: 27rpx;
				padding: 0 20rpx;
				padding-bottom: 30rpx;
				box-sizing: border-box;

				.address {
					margin-top: 20rpx;
					display: flex;

					.address-title {
						// width: 300rpx;
						width: 30%;
						color: #7c7c7c;
						// border: 1px solid #000;
					}

					.address-content {
						width: 70%;
						// border: 1px solid #f00;
					}
				}

				.photo {
					margin-top: 20rpx;

					.photo-title {
						color: #7c7c7c;
					}

					.photo-box {
						margin-top: 10rpx;
						display: flex;

						image {
							width: 150rpx;
							height: 150rpx;
							border-radius: 10rpx;
							margin-right: 10rpx;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
		.loading{
			text-align: center;
			width: 100%;
			margin-top: 20rpx;
		}
	}
</style>